<template>
	<view class="content">
		<view class="user-list" v-for="(item,index) in userList" :key="index" @click="goDetail(item)">
			<u-avatar :src="src" size="55"></u-avatar>
			<view class="list-text">
				<view style="font-weight: 500;color: #000000;font-size: 31rpx;">
					<u--text mode="name" :text="item.patientName" format="encrypt"></u--text>
				</view>
				<view>就诊卡号：{{item.patientCard.substr(0, 1) + '****************'+item.patientCard.substr(-1, 1)}}</view>
				<view>证件类型：身份证</view>
			</view>
			<canvas :canvas-id="item.patientId" style="width: 70px;height: 70px;margin-left: auto;"
				@click.stop="goQrcode(item)"></canvas>
			<!-- <image src="../../static/img/qrcode.png" style="width: 123rpx;height: 123rpx;margin-left: auto;"></image> -->
		</view>
		<view class="book-bom">
			<view class="book-but">
				<u-button type="primary" text="添加就诊人" @click="goPage('/pages/bookbuilding/bookbuilding')"></u-button>
			</view>
		</view>
		<u-loading-page :loading="loading" loading-text="加载中..."></u-loading-page>
	</view>

</template>

<script>
	import {
		userlistApi
	} from "@/api/user"
	import UQRCode from 'uqrcodejs';
	export default {
		data() {
			return {
				src: '',
				userList: [],
				loading: true,
			}
		},
		onShow() {
			this.getUser()
		},

		methods: {
			makeQrcode(id) {
				// 获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = id;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 70;
				// 调用制作二维码方法

				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext(id, this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
			},
			async getUser() {
				try {
					let userInfo = uni.getStorageSync('userInfo')
					const res = await userlistApi({
						userId: userInfo.id,
						pageNum: 1,
						pageSize: 100,
						patientType: 1
					})
					this.userList = res.rows
					this.$nextTick(() => {
						this.userList.forEach((row) => {
							this.makeQrcode(row.patientId)
						})

					})
					this.loading = false
				} catch (e) {
					this.loading = false
				}

			},
			goQrcode(item) {
				uni.navigateTo({
					url: `/pages/qrcode/qrcode?patientId=${item.patientId}`
				})
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/userinfo/userinfo?id=${item.id}`
				})
			},
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		min-height: 100%;
		box-sizing: border-box;
		background: #F8F8F8;
		color: #999999;
		font-size: 23rpx;
		padding-top: 23rpx;
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.user-list {
		width: 688rpx;
		height: 185rpx;
		background: #FFFFFF;
		border-radius: 19rpx;
		box-sizing: border-box;
		padding: 31rpx;
		display: flex;
		align-items: center;
		margin-bottom: 23rpx;
	}

	.list-text {
		height: 100%;
		margin-left: 23rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.book-bom {
		width: 100vw;
		background: #F8F8F8;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 120rpx;
		box-sizing: content-box;
		padding-bottom: env(safe-area-inset-bottom);
		bottom: 0;
	}

	.book-but {
		width: 688rpx;

	}
</style>